<script setup lang="jsx">
import CommonList from "@/components/CommonList.vue";
import { useCommonQuery } from "@/composables/useCommonQuery.js";
import { getRobotList } from "@/api/common/archives.js";
import { ref } from "vue";
import { getSphereLog, sphereRemoteContorl } from "@/api/sphere/cruise.js";
import { ElMessage } from "element-plus";

const queryOptions = {
  queryApi: getRobotList,
  newParams: {
    RType: "sphere",
  },
};

const queryItem = ref([
  { prop: "id", placeholder: "编号" },
  { prop: "name", placeholder: "机器人名称" },
]);

const {
  tableData,
  loading,
  queryParams,
  pagingParams,
  handleQuery,
  handleReset,
} = useCommonQuery(queryOptions);
handleQuery();

const columns = [
  { label: "编号", prop: "id", width: 80 },
  { label: "机器人名称", prop: "name" },
  { label: "编码", prop: "code" },
  { label: "mac地址", prop: "mac" },
  { label: "状态", prop: "status" },
  {
    label: "操作",
    prop: "action",
    customRender(row) {
      return (
        <div>
          <el-button
            text
            bg
            type="primary"
            onClick={() => {
              showRobotStatus(row.code);
              robotStatusVisible.value = true;
            }}
          >
            查看状态
          </el-button>
        </div>
      );
    },
  },
];

const robotStatusOptions = [
  { prop: "code", name: "机器人编码" },
  { prop: "lat", name: "经度" },
  { prop: "lon", name: "纬度" },
  { prop: "v", name: "速度" },
  { prop: "x", name: "小球尾杆伸缩" },
  { prop: "m", name: "小球展开与合并" },
];

let timer;
const robotStatusVisible = ref(false);
const robotStatusData = ref({});
const robotContorlData = ref({
  type: "navigation",
  L: 0,
  R: 0,
  V: 0,
  X: 0,
  M: 0,
});
async function showRobotStatus(code) {
  clearTimeout(timer);
  const {
    data: { list = [] },
  } = await getSphereLog({ code });
  robotStatusData.value = list[0];
  timer = setTimeout(() => {
    showRobotStatus(code);
  }, 3000);
}
async function launchMotionControl() {
  const { message } = await sphereRemoteContorl(
    robotContorlData.value,
    robotStatusData.value.code
  );
  ElMessage({ type: "success", message });
}
function closeRobotStatus() {
  clearTimeout(timer);
  Object.keys(robotContorlData.value).forEach((item) => {
    if (item !== "type") {
      robotContorlData.value[item] = 0;
    }
  });
}
</script>
<template>
  <div class="h-main w-full p-4">
    <CommonList
      :table-data="tableData"
      :loading="loading"
      :table-columns="columns"
      :query-params="queryParams"
      :query-item="queryItem"
      :paging-params="pagingParams"
      @handle-query="handleQuery"
      @handle-reset="handleReset"
    ></CommonList>
    <el-dialog
      v-model="robotStatusVisible"
      title="机器人状态"
      @close="closeRobotStatus"
    >
      <div class="flex flex-col gap-4">
        <el-descriptions border :column="2">
          <el-descriptions-item
            v-for="item in robotStatusOptions"
            :key="item.prop"
            :label="item.name"
            align="center"
          >
            {{ robotStatusData[item.prop] }}
          </el-descriptions-item>
        </el-descriptions>
        <span role="heading" class="el-dialog__title">运动控制</span>
        <el-form label-width="140px" label-suffix=" :  ">
          <el-form-item label="操作类型">
            <el-select v-model="robotContorlData.type">
              <el-option label="navigation" value="navigation" />
            </el-select>
          </el-form-item>
          <el-form-item label="经度与目标的差值">
            <el-slider v-model="robotContorlData.L" :min="-100" />
          </el-form-item>
          <el-form-item label="纬度与目标的差值">
            <el-slider v-model="robotContorlData.R" :min="-100" />
          </el-form-item>
          <el-form-item label="速度">
            <el-slider v-model="robotContorlData.V" />
          </el-form-item>
          <el-form-item label="小球尾杆伸缩">
            <el-switch
              v-model="robotContorlData.X"
              active-text="收"
              inactive-text="伸"
              active-value="0"
              inactive-value="1"
            />
          </el-form-item>
          <el-form-item label="小球展开与合并">
            <el-switch
              v-model="robotContorlData.M"
              active-text="合并"
              inactive-text="展开"
              active-value="0"
              inactive-value="1"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="launchMotionControl">
              确认
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
